<template>
  <div class="details">
    <div class="details-header">
      <van-nav-bar title="文章详情" left-arrow @click-left="$router.back()" />
    </div>
    <div class="details-top">
      <div class="top-title">
        <h3>{{ details.title }}</h3>
      </div>
      <div class="top-footer">
        <div class="top-footer-l">
          <van-image round width="50" height="50" :src="details.avatar" />
          <!-- <img :src="details.avatar" alt="" /> -->
          <div class="footer-l-text">
            <span> 作者：{{ details.author }}</span>
            <em>{{details.time|conversion}}</em>
          </div>
        </div>
        <div class="top-footer-r">
          <van-icon name="plus" />
          <span>已关注</span>
        </div>
      </div>
    </div>
    <div class="details-main">
      <div class="main-article">
        <span>
          {{ details.content }}
        </span>
        <div class="main-img"><img :src="details.imageSrc" alt="" /></div>
      </div>

      <div class="main-footer" v-for="item in comment" :key="item._id">
        <div class="main-footer-l">
          <van-image round width="40" height="40" :src="item.info.avatar" />
        </div>
        <div class="main-footer-m">
          <i>{{ item.info.nickname }}</i>
          <span v-html="item.content"></span>
          <em>{{item.create_time|conversion}}</em>
        </div>
        <div class="main-footer-r" @click="getComment_like">
          <van-icon  :color="color" name="good-job" />
          <span>{{ details.like }}</span>
        </div>
        
      </div>
    </div>
    <div class="null"></div>
    <!-- 底部评论栏 -->
    <!-- <van-number-keyboard safe-area-inset-bottom /> -->
    <div class="footer">
      <div class="footer-box">
        <div class="input">
          <van-field
            v-model="text"
            center
            clearable
            input-align="center"
            placeholder="写评论"
          >
            <template #button>
              <van-button
                size="small"
                @click="getAdd_comment"
                native-type="button"
                color="rgb(7,193,96)"
                >发送</van-button
              >
            </template>
          </van-field>
        </div>
        <van-icon name="comment-o" />
        <van-icon name="star" />
        <van-icon name="good-job" />
        <van-icon name="share" />
      </div>
    </div>
  </div>
</template>

<script>
import { Image as VanImage, Lazyload ,} from "vant";
export default {
  components: {
    [VanImage.name]: VanImage,
    [Lazyload.name]: Lazyload,
  },
  data() {
    return {
      show:false,
      color: "#000",
      details: [],
      comment: [],
      userinfo: [],
      comment_list: "",
      text: "",
    };
  },
  created() {
    this.getArticle();
    this.get_comment_list();
  },
  computed: {
    // 接收传递过来的文章id
    article_id() {
      return this.$route.query.cate_id;
    },

    user_id() {
      return this.$route.query.author_id;
    },
  },

  methods: {
    // /api/get_article_detail
    getArticle() {
      console.log("用户id是：" + this.user_id);
      console.log("文章id是：" + this.article_id);
      this.$http
        .post("/api/get_article_detail", {
          article_id: this.article_id,
          user_id: this.user_id,
        })
        .then((res) => {
          console.log(res);
          if (res.code == 0) {
            this.details = res.data;
            console.log(this.details);
          }
        });
    },
    // 获取评论
    get_comment_list() {
      this.$http
        .post("/api/get_comment_list", {
          article_id: this.article_id,
          // 分页开始条数:skip
          // 一次返回几条:limit
          skip: 0,
          limit: 10,
        })
        .then((res) => {
          if (res.code == 0) {
            this.comment = res.data;
            console.log(this.comment);
            console.log("评论条数");
          }
        });
    },

    // 评论
    getAdd_comment() {
      this.$http
        .post("/api/add_comment", {
          user_id: localStorage.getItem("tt-uid"),
          article_id: this.article_id,
          comment_type: 0,
          reply_comment_id: 1,
          content: this.text,
        })
        .then((res) => {
          console.log(res);
          this.get_comment_list();
        });
    },

    // 点赞
    getComment_like(i) {
      console.log(1);
     if (this.show==false) {
       this.color = "red";
       this.show=true
     }else{
      this.color="#000"
      this.show=false
     }
    },
  },
    filters: {
    //3.定义一个处理函数，参数value为要处理数据
    conversion: function (value) {
      //调用Date的方法，处理时间戳
      return new Date(value).toLocaleString();
    },
  },
};
//在data中定义show为false  show默认为false  绑定单击事件点击变为true 在事件里面this.color="red"
</script>

<style lang="scss" lang="less" scoped>


.details {
  height: 100%;
  background-color: rgb(245, 247, 249);
}
.details-top {
  padding: 20px;
  padding-bottom: 10px;
  h3 {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  span {
    word-wrap: break-word;
  }
  .top-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;

    .top-footer-l {
      display: flex;
      width: 70%;
      // img {
      //   width: 17%;
      //   height: 17%;
      //   border-radius: 50%;
      //   margin-right: 10px;
      // }
      .footer-l-text {
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        width: 80%;
        span {
          display: block;
          margin-bottom: 5px;
          width: 100%;
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
        }
        em {
          display: block;
          font-style: normal;
          color: #ccc;
          font-size: 14px;
        }
      }
    }
    .top-footer-r {
      border: 1px solid #ccc;
      padding: 5px 10px;
      border-radius: 20px;
      span {
        margin-left: 5px;
      }
    }
  }
}
.details-main {
  padding: 20px;
  position: relative;
  span {
    word-wrap: break-word;
  }
  .main-img {
    text-align: center;
    img {
      margin-top: 50px;
      width: 100%;
    }
  }
  &:before {
    content: "";
    position: absolute;
    left: 20px;
    top: 0px;
    right: 20px;
    border-top: 1px solid #ccc;
  }
  .main-footer {
    margin-top: 20px;
    display: flex;
    justify-content: space-between;
    .main-footer-l {
      width: 12%;
      margin-right: 15px;
      img {
        width: 100%;
        border-radius: 50%;
      }
    }
    .main-footer-m {
      flex: 1;
      i {
        font-style: normal;
        color: rgb(29, 113, 224);
        display: block;
      }
      span {
        display: block;
        font-size: 16px;
      }
      em {
        font-style: normal;
        display: block;
        font-size: 12px;
      }
    }
    .main-footer-r {
      width: 10%;
    }
  }
}
.footer {
  width: 100%;
  position: fixed;
  bottom: 0;
}
.footer-box {
  background-color: #fff;
  align-items: center;
  display: flex;
  justify-content: space-between;
  padding: 5px 10px;

  .input {
    padding: 5px 0;
    width: 70%;

    text-align: center;
    .van-cell {
      border: 1px solid #ccc;
      border-radius: 30px;
      padding: 0;
    }
  }
}
.null {
  width: 100%;
  height: 20px;
 
}
</style>